<template>
  <div class="classifyDetail-main">
    <!-- 通用头部 -->
    <div class="com-header">
        <button class="back" @click="$router.go(-1)"><i></i></button>
        <span>{{classifyName}}</span>
    </div>
    <!-- 网页内容区域 -->
    <div class="view-content">
       <div class="wrapper">
           <div class="header-menu" v-if="categoryData">
               <div class="menu-item">
                   <button :class="{'btn-active': keyValue==item.value}" @click="categoryKeyClick(item)" v-for="(item,index) in categoryData.key" :key="index">{{item.name}}</button>
               </div>
               <div class="menu-item">
                   <button :class="{'btn-active': wordsValue==item.value}" @click="categoryWordsClick(item)" v-for="(item,index) in categoryData.words" :key="index">{{item.name}}</button>
               </div>
               <div class="menu-item">
                   <button :class="{'btn-active': typeVaule==item.value}" @click="categoryTypeClick(item)" v-for="(item,index) in categoryData.type" :key="index">{{item.name}}</button>
               </div>
           </div>
            <ul v-if="categoryNovelData">
                <router-link tag="li" :to="'/novelDetail/'+item.book_id" v-for="(item,index) in categoryNovelData.books" :key="index">
                    <div class="left"><img :src="item.cover" :alt="item.name" onerror="this.src='https://static.kuaiyankanshu.net/';this.onerror=null"></div>
                    <div class="right">
                        <p class="ellipsis title">{{item.name}}</p>
                        <p class="ellipsis">{{item.author}}</p>
                        <p class="ellipsis">{{item.intro}}</p>
                        <p class="ellipsis">{{item.marknum}}人在追 | {{item.retention}}读者留存</p>
                    </div>
                </router-link>
            </ul>
       </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  import api from '~/plugins/api.js'
  import axios from 'axios'
  export default {
    head() {
        return {
            title: `${this.classifyName} - 快眼看书`,
            meta: [{
                name: 'description',
                content: `快眼看书专注于${this.classifyName}小说搜索.`
            },{
                name: 'keyWords',
                content: `${this.classifyName},快眼看书`
            }]
        }
    },
    data () {
      return {
         keyValue: 'xuanhuan',
         wordsValue: '0',
         typeVaule: 'hot',
         classifyName: '玄幻',
         categoryData: {},
         categoryNovelData: {}
      }
    },
    created() {
         this.classifyName = this.$route.query.name
         this.keyValue = this.$route.query.key
         if(!process.server){
            this.getClassifyData()
        }
    },
    mounted() {
    },
    methods: {
        getClassifyData() {
            this.getCategoryData()
            this.getCategoryNovelData()
        },
        // 二级分类列表 - 获取最新数据
        async getCategoryData() {
            let parame = {
                key: this.keyValue
            }
            let result = await axios.get(api.category,{params:parame})
            if(result){
                this.categoryData = result.data.data
            }
        },
        // 分类着陆页 - 获取最新数据
        async getCategoryNovelData() {
            let parame = {
                key: this.keyValue,
                words: this.wordsValue,
                type: this.typeVaule, 
            }
            let result = await axios.get(api.categoryNovel,{params:parame})
            if(result){
                this.categoryNovelData = result.data.data
            }
        },
        categoryTypeClick(item) {
            this.typeVaule = item.value
            this.getCategoryNovelData()
        },
        categoryKeyClick(item) {
            this.keyValue = item.value
            this.getCategoryNovelData()
        },
        categoryWordsClick(item) {
            this.wordsValue = item.value
            this.getCategoryNovelData()
        }

    },
    async asyncData(content){
        console.log('asyncData-------',process.server)
        // 服务端渲染
        if(process.server){
            // 二级分类列表
            let parame = {
                key: content.query.key
            }
            let category = await axios.get(api.category,{params:parame})
            let categoryData = {}
            if(category){
                categoryData = category.data.data
            }

            // 分类着陆页
            let categoryNovel = await axios.get(api.categoryNovel,{params:parame})
            let categoryNovelData = {}
            if(categoryNovel){
                categoryNovelData = categoryNovel.data.data
            }
            return {categoryData: categoryData, categoryNovelData: categoryNovelData}
        }
    }
  }
</script>
